<template name="cropper">
	<view class="cropper-container">
		<!-- 显示选中的图片 -->
		<image 
			:src="imgSrc.imgSrc" 
			class="my-avatar" 
			mode="aspectFill" 
			@click="fSelect" 
			:style="avatarStyle"
		></image>
		
		<!-- 相机预览视图 - 关键修复：添加相机组件 -->
		<camera 
			v-if="isCameraMode" 
			class="camera-preview" 
			device-position="back" 
			flash="off"
			@error="handleCameraError"
		></camera>
		
		<!-- 拍照提示框（覆盖在相机预览上） -->
		<view class="camera-frame" v-if="isCameraMode">
			<!-- 四角标记 -->
			<view class="frame-corner top-left"></view>
			<view class="frame-corner top-right"></view>
			<view class="frame-corner bottom-left"></view>
			<view class="frame-corner bottom-right"></view>
			
			<!-- 提示文字 -->
			<view class="frame-tip">请将一寸照片置于框内</view>
		</view>
		
		<!-- 上传图片的画布 -->
		<canvas 
			canvas-id="avatar-canvas" 
			id="avatar-canvas" 
			class="my-canvas" 
			:style="{top: styleTop, height: cvsStyleHeight}"
			disable-scroll="false"
		></canvas>
		
		<!-- 裁剪框画布 -->
		<canvas 
			canvas-id="oper-canvas" 
			id="oper-canvas" 
			class="oper-canvas" 
			:style="{top: styleTop, height: cvsStyleHeight}"
			disable-scroll="false" 
			@touchstart="fStart" 
			@touchmove="fMove" 
			@touchend="fEnd"
		></canvas>
		
		<!-- 相机模式操作按钮 -->
		<view class="camera-controls" v-if="isCameraMode">
			<view class="camera-btn cancel-btn" @click="cancelCamera">取消</view>
			<view class="camera-btn capture-btn" @click="takePhoto">
				<view class="shutter"></view>
			</view>
			<view class="camera-btn album-btn" @click="chooseFromAlbum">相册</view>
		</view>
		
		<!-- 裁剪模式操作按钮 -->
		<view class="oper-wrapper" :style="{display: styleDisplay}">
			<view class="btn-wrapper" v-if="showOper">
				<view @click="fClose" hover-class="hover">取消</view>
				<view @click="fUpload" hover-class="hover">确认裁剪</view>
			</view>
		</view>
	</view>
</template>

<script>
	const tabHeight = 70;
	export default {
		name: "cropper",
		data() {
			return {
				// 画布样式
				cvsStyleHeight: '0px',
				styleDisplay: 'none',
				styleTop: '-10000px',
				prvTop: '-10000px',
				
				// 图片和选择框样式
				imgStyle: {},
				selStyle: {},
				showOper: true,
				imgSrc: {
					imgSrc: ''
				},
				
				// 图片处理参数
				qlty: 0.9,
				postWidthFirst: {},
				drawTm: 0,
				
				// 相机相关状态
				isCameraMode: false,       // 是否处于相机模式
				cameraContext: null,       // 相机上下文
				tempImagePath: '',         // 临时图片路径
				
				// 图片尺寸信息
				imgWidth: 0,
				imgHeight: 0,
				imgPath: '',
				windowWidth: 0,
				windowHeight: 0,
				pxRatio: 0,
				selWidthPx: 0,
				selHeightPx: 0,
				
				// 缩放和移动相关
				scaleSize: 1,
				posWidth: 0,
				posHeight: 0,
				useWidth: 0,
				useHeight: 0,
				touch0: null,
				touch1: null,
				fgDistance: 0,
				
				// 组件状态锁
				fSelecting: false,
				fUploading: false
			};
		},
		watch: {
			avatarSrc(newVal) {
				this.imgSrc.imgSrc = newVal;
			}
		},
		props: {
			avatarSrc: {
				type: String,
				default: ''
			},
			avatarStyle: {
				type: String,
				default: ''
			},
			selWidth: {
				type: String,
				default: '550rpx'
			},
			selHeight: {
				type: String,
				default: '770rpx'
			},
			expWidth: {
				type: String,
				default: ''
			},
			expHeight: {
				type: String,
				default: ''
			},
			minScale: {
				type: String,
				default: '0.3'
			},
			maxScale: {
				type: String,
				default: '4'
			},
			canScale: {
				type: String,
				default: 'true'
			},
			noTop: {
				type: String,
				default: ''
			},
			quality: {
				type: String,
				default: '0.9'
			},
			index: {
				type: String,
				default: ''
			}
		},
		onReady() {
			// 关键修复：在组件就绪后初始化相机上下文
			this.cameraContext = uni.createCameraContext(this);
		},
		created() {
			this.ctxCanvas = uni.createCanvasContext('avatar-canvas', this);
			this.ctxCanvasOper = uni.createCanvasContext('oper-canvas', this);

			this.qlty = parseFloat(this.quality) || 0.9;
			this.imgSrc.imgSrc = this.avatarSrc;
			this.letScale = this.canScale !== 'false';
			this.indx = this.index || undefined;
			this.mnScale = parseFloat(this.minScale) || 0.3;
			this.mxScale = parseFloat(this.maxScale) || 4;
			this.noBar = !!this.noTop;
			
			// 获取系统信息并初始化
			this.initSystemInfo();
		},
		methods: {
			// 初始化系统信息
			initSystemInfo() {
				let sysInfo = uni.getSystemInfoSync();
				this.platform = sysInfo.platform;
				this.pixelRatio = sysInfo.pixelRatio;
				this.windowWidth = sysInfo.windowWidth;
				this.windowHeight = sysInfo.windowHeight;
				
				// 计算rpx转px的比例
				this.pxRatio = this.windowWidth / 750;
				
				// 转换选择框尺寸（rpx转px）
				this.selWidthPx = this.selWidth.indexOf('rpx') >= 0 
					? parseInt(this.selWidth) * this.pxRatio 
					: parseInt(this.selWidth);
				this.selHeightPx = this.selHeight.indexOf('rpx') >= 0 
					? parseInt(this.selHeight) * this.pxRatio 
					: parseInt(this.selHeight);
				
				// 设置画布高度
				this.cvsStyleHeight = this.windowHeight - tabHeight + 'px';

				// 初始化选择框样式
				this.selStyle = {
					width: this.selWidthPx,
					height: this.selHeightPx,
					top: parseInt((this.windowHeight - this.selHeightPx - tabHeight) / 2),
					left: parseInt((this.windowWidth - this.selWidthPx) / 2)
				};
			},
			
			// 选择图片（相册或拍照）
			fSelect() {
				if (this.fSelecting) return;
				this.fSelecting = true;
				setTimeout(() => {
					this.fSelecting = false;
				}, 500);

				// 直接进入相机模式
				this.enterCameraMode();
			},
			
			// 进入相机模式
			enterCameraMode() {
				// 关键修复：检查相机权限
				uni.authorize({
					scope: 'scope.camera',
					success: () => {
						this.isCameraMode = true;
						this.styleDisplay = 'none';
					},
					fail: () => {
						// 引导用户开启权限
						uni.showModal({
							title: '权限申请',
							content: '需要相机权限才能拍照',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting();
								}
							}
						});
					}
				});
			},
			
			// 取消拍照
			cancelCamera() {
				this.isCameraMode = false;
			},
			
			// 拍照 - 关键修复：确保拍照功能正常工作
			takePhoto() {
				if (!this.cameraContext) {
					this.cameraContext = uni.createCameraContext(this);
				}
				
				// 关键修复：添加加载提示，让用户知道正在处理
				uni.showLoading({
					title: '拍照中...',
					mask: true
				});
				
				// 调用相机拍照
				this.cameraContext.takePhoto({
					quality: 'high',
					success: (res) => {
						uni.hideLoading();
						this.tempImagePath = res.tempImagePath;
						this.isCameraMode = false;
						this.handleCameraPhoto(this.tempImagePath);
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('拍照失败:', err);
						uni.showToast({
							title: '拍照失败，请重试',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			
			// 从相册选择图片
			chooseFromAlbum() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					success: (r) => {
						this.isCameraMode = false;
						this.handleSelectedImage(r.tempFilePaths[0]);
					}
				});
			},
			
			// 处理拍照得到的图片
			handleCameraPhoto(path) {
				this.handleSelectedImage(path);
			},
			
			// 处理选中的图片（拍照或相册）
			handleSelectedImage(path) {
				uni.showLoading({
					title: '处理中...',
					mask: true
				});
				
				this.imgPath = path;
				uni.getImageInfo({
					src: path,
					success: (imgInfo) => {
						this.imgWidth = imgInfo.width;
						this.imgHeight = imgInfo.height;
						this.path = path;

						if (this.noBar) {
							this.fDrawInit(true);
						} else {
							uni.hideTabBar({
								complete: () => {
									this.fDrawInit(true);
								}
							});
						}
					},
					fail: (err) => {
						console.error('获取图片信息失败:', err);
						uni.showToast({
							title: "图片处理失败",
							duration: 2000,
							icon: 'none'
						});
					},
					complete() {
						uni.hideLoading();
					}
				});
			},
			
			// 确认裁剪并上传
			fUpload() {
				if (this.fUploading) return;
				this.fUploading = true;
				
				let style = this.selStyle,
					x = parseInt(style.left),
					y = parseInt(style.top),
					width = parseInt(style.width),
					height = parseInt(style.height),
					expWidth = this.exportWidth || width,
					expHeight = this.exportHeight || height;

				this.styleDisplay = 'none';
				this.styleTop = '-10000px';
				
				uni.canvasToTempFilePath({
					x: x,
					y: y,
					width: width,
					height: height,
					destWidth: expWidth,
					destHeight: expHeight,
					canvasId: 'avatar-canvas',
					fileType: 'png',
					quality: this.qlty,
					success: (r) => {
						// 不同平台处理
						// #ifdef H5
						this.btop(r.tempFilePath).then((convertedPath) => {
							this.$emit("upload", {
								avatar: this.imgSrc,
								path: convertedPath,
								index: this.indx
							});
							this.fUploading = false;
						});
						// #endif
						
						// #ifndef H5
						this.$emit("upload", {
							avatar: this.imgSrc,
							path: r.tempFilePath,
							index: this.indx
						});
						this.fUploading = false;
						// #endif
					},
					fail: (res) => {
						console.error('裁剪失败:', res);
						uni.showToast({
							title: "裁剪失败",
							duration: 2000,
							icon: 'none'
						});
						this.fUploading = false;
					},
					complete: () => {
						if (!this.noBar) uni.showTabBar();
					}
				}, this);
			},
			
			// 初始化绘制
			fDrawInit(ini = false) {
				let allWidth = this.windowWidth,
					allHeight = this.windowHeight,
					imgWidth = this.imgWidth,
					imgHeight = this.imgHeight,
					imgRadio = imgWidth / imgHeight,
					useWidth = allWidth,
					useHeight = allHeight - tabHeight,
					selWidth = parseInt(this.selStyle.width),
					selHeight = parseInt(this.selStyle.height);

				// 计算图片显示尺寸
				if (imgRadio < 1) {
					useWidth = selWidth;
					useHeight = parseInt(useWidth / imgRadio);
				} else {
					useHeight = selHeight;
					useWidth = parseInt(useHeight * imgRadio);
				}

				this.scaleSize = 1;
				this.posWidth = parseInt((allWidth - useWidth) / 2);
				this.posHeight = parseInt((allHeight - useHeight - tabHeight) / 2);
				this.useWidth = useWidth;
				this.useHeight = useHeight;
				
				let style = this.selStyle,
					left = parseInt(style.left),
					top = parseInt(style.top),
					width = parseInt(style.width),
					height = parseInt(style.height),
					ctxCanvas = this.ctxCanvas,
					ctxCanvasOper = this.ctxCanvasOper;
				
				// 绘制裁剪遮罩
				ctxCanvasOper.setFillStyle('rgba(0,0,0, 0.5)');
				ctxCanvasOper.fillRect(0, 0, this.windowWidth, top);
				ctxCanvasOper.fillRect(0, top, left, height);
				ctxCanvasOper.fillRect(0, top + height, this.windowWidth, this.windowHeight - height - tabHeight - top);
				ctxCanvasOper.fillRect(left + width, top, this.windowWidth - width - left, height);
				
				// 绘制裁剪框
				ctxCanvasOper.setLineWidth(1);
				ctxCanvasOper.setStrokeStyle('rgba(255, 255, 255,1)');
				ctxCanvasOper.strokeRect(left, top, width, height);
				
				// 绘制四角标记
				ctxCanvasOper.setLineWidth(3);
				ctxCanvasOper.setStrokeStyle('rgba(255, 255, 255, 1)');
				ctxCanvasOper.moveTo(left + 20, top);
				ctxCanvasOper.lineTo(left, top);
				ctxCanvasOper.lineTo(left, top + 20);
				ctxCanvasOper.moveTo(left + width - 20, top);
				ctxCanvasOper.lineTo(left + width, top);
				ctxCanvasOper.lineTo(left + width, top + 20);
				ctxCanvasOper.moveTo(left + 20, top + height);
				ctxCanvasOper.lineTo(left, top + height);
				ctxCanvasOper.lineTo(left, top + height - 20);
				ctxCanvasOper.moveTo(left + width - 20, top + height);
				ctxCanvasOper.lineTo(left + width, top + height);
				ctxCanvasOper.lineTo(left + width, top + height - 20);
				ctxCanvasOper.stroke();
				
				this.postFirst = {
					left: left,
					top: top,
					width: width,
					height: selWidth,
					posWidth: this.posWidth,
					posHeight: this.posHeight
				};
				
				// 不同平台绘制处理
				// #ifdef MP-WEIXIN
				ctxCanvasOper.draw(false, () => {
					if (ini) {
						this.styleDisplay = 'flex';
						this.styleTop = '0';
						ctxCanvas.setFillStyle('black');
						this.fDrawImage();
					}
				});
				// #endif
				
				// #ifdef H5
				ctxCanvasOper.draw(true, () => {
					if (ini) {
						this.styleDisplay = 'flex';
						this.styleTop = '0px';
						ctxCanvas.setFillStyle('black');
						this.fDrawImage();
					}
				});
				// #endif

				this.$emit("avtinit");
			},
			
			// 绘制图片
			fDrawImage() {
				let tm_now = Date.now();
				if ((tm_now - this.drawTm) < 20) return;
				this.drawTm = tm_now;
				
				let ctxCanvas = this.ctxCanvas;
				ctxCanvas.fillRect(0, 0, this.windowWidth, this.windowHeight - tabHeight);
				
				// 绘制图片（支持缩放）
				ctxCanvas.translate(this.posWidth + this.useWidth / 2, this.posHeight + this.useHeight / 2);
				ctxCanvas.scale(this.scaleSize, this.scaleSize);
				ctxCanvas.drawImage(this.imgPath, -this.useWidth / 2, -this.useHeight / 2, this.useWidth, this.useHeight);
				ctxCanvas.draw(false);
			},
			
			// 隐藏图片
			fHideImg() {
				this.prvImg = '';
				this.prvTop = '-10000px';
				this.showOper = true;
				this.prvImgData = null;
				this.target = null;
			},
			
			// 关闭裁剪
			fClose() {
				this.styleDisplay = 'none';
				this.styleTop = '-10000px';
				this.fHideImg();
				if (!this.noBar) uni.showTabBar();
			},
			
			// 处理相机错误
			handleCameraError(e) {
				console.error('相机错误:', e.detail);
				uni.showToast({
					title: '相机启动失败',
					icon: 'none',
					duration: 2000
				});
				this.isCameraMode = false;
			},
			
			// 触摸开始（微信小程序）
			// #ifdef MP-WEIXIN
			fStart(e) {
				let touches = e.touches,
					touch0 = touches[0],
					touch1 = touches[1];

				this.touch0 = touch0;
				this.touch1 = touch1;

				if (touch1) {
					let x = touch1.x - touch0.x,
						y = touch1.y - touch0.y;
					this.fgDistance = Math.sqrt(x * x + y * y);
				}
			},
			// #endif
			
			// 触摸开始（H5）
			// #ifdef H5
			fStart(e) {
				let touches = e.touches,
					touch0 = touches[0],
					touch1 = touches[1];

				this.touch0 = touch0;
				this.touch1 = touch1;

				if (touch1) {
					let x = touch1.clientX - touch0.clientX,
						y = touch1.clientY - touch0.clientY;
					this.fgDistance = Math.sqrt(x * x + y * y);
				}
			},
			// #endif
			
			// 触摸移动（微信小程序）
			// #ifdef MP-WEIXIN
			fMove(e) {
				let touches = e.touches,
					touch0 = touches[0],
					touch1 = touches[1];

				if (touch1) {
					// 双指缩放
					let x = touch1.x - touch0.x,
						y = touch1.y - touch0.y,
						fgDistance = Math.sqrt(x * x + y * y),
						scaleSize = 0.005 * (fgDistance - this.fgDistance),
						beScaleSize = this.scaleSize + scaleSize;

					if (this.letScale && beScaleSize >= this.mnScale && beScaleSize <= this.mxScale) {
						this.scaleSize = beScaleSize;
					}
					this.fgDistance = fgDistance;
					this.fDrawImage();
				} else if (this.touch0) {
					// 单指拖动
					let x = touch0.x - this.touch0.x,
						y = touch0.y - this.touch0.y,
						beX = this.posWidth + x,
						beY = this.posHeight + y;
					
					if (Math.abs(x) < 100) this.posWidth = beX;
					if (Math.abs(y) < 100) this.posHeight = beY;
					
					this.touch0 = touch0;
					this.fDrawImage();
				}
			},
			// #endif
			
			// 触摸移动（H5）
			// #ifdef H5
			fMove(e) {
				let touches = e.touches,
					touch0 = touches[0],
					touch1 = touches[1];

				if (touch1) {
					// 双指缩放
					let x = touch1.clientX - touch0.clientX,
						y = touch1.clientY - touch0.clientY,
						fgDistance = Math.sqrt(x * x + y * y),
						scaleSize = 0.005 * (fgDistance - this.fgDistance),
						beScaleSize = this.scaleSize + scaleSize;

					if (this.letScale && beScaleSize >= this.mnScale && beScaleSize <= this.mxScale) {
						this.scaleSize = beScaleSize;
					}
					this.fgDistance = fgDistance;
					this.fDrawImage();
				} else if (this.touch0) {
					// 单指拖动
					let x = touch0.clientX - this.touch0.clientX,
						y = touch0.clientY - this.touch0.clientY,
						beX = this.posWidth + x,
						beY = this.posHeight + y;
					
					if (Math.abs(x) < 100) this.posWidth = beX;
					if (Math.abs(y) < 100) this.posHeight = beY;
					
					this.touch0 = touch0;
					this.fDrawImage();
				}
			},
			// #endif
			
			// 触摸结束
			fEnd(e) {
				let self = this;
				let touches = e.touches,
					touch0 = touches && touches[0];
				
				// 边界处理
				if (self.scaleSize < 1) {
					let style = self.selStyle;
					let imgRadio = self.imgWidth / self.imgHeight;
					
					if (imgRadio < 1 && self.scaleSize * self.useWidth < style.width) {
						self.posWidth = style.left;
						self.scaleSize = 1;
						setTimeout(() => self.fDrawImage(), 100);
					} else if (self.scaleSize * self.useHeight < style.width) {
						self.posHeight = style.top;
						self.scaleSize = 1;
						setTimeout(() => self.fDrawImage(), 100);
					}
				} else if (this.scaleSize == 1) {
					let endWidth = this.posWidth - this.postFirst.posWidth,
						firstWidth = this.postFirst.left - this.postFirst.posWidth;
					let endHeight = this.posHeight - this.postFirst.posHeight,
						firstHigth = this.postFirst.top - this.postFirst.posHeight;
					
					// 左右边界限制
					if (endWidth > 0 && this.posWidth > this.postFirst.left) {
						this.posWidth = this.postFirst.left;
					} else if (endWidth < 0 && endWidth < firstWidth) {
						this.posWidth = -this.postFirst.left + this.postFirst.posWidth * 2;
					}
					
					// 上下边界限制
					if (endHeight < 0 && this.posHeight < this.postFirst.top) {
						this.posHeight = -this.postFirst.top + this.postFirst.posHeight * 2;
					} else if (endHeight > 0 && endHeight > firstHigth) {
						this.posHeight = this.postFirst.top;
					}
					
					setTimeout(() => self.fDrawImage(), 100);
				}
				
				if (touch0) {
					this.touch0 = touch0;
				} else {
					this.touch0 = null;
					this.touch1 = null;
				}
			},
			
			// base64转图片路径（H5）
			btop(base64) {
				return new Promise(function(resolve) {
					var arr = base64.split(','),
						mime = arr[0].match(/:(.*?);/)[1],
						bstr = atob(arr[1]),
						n = bstr.length,
						u8arr = new Uint8Array(n);
					
					while (n--) {
						u8arr[n] = bstr.charCodeAt(n);
					}
					
					resolve((window.URL || window.webkitURL).createObjectURL(
						new Blob([u8arr], { type: mime })
					));
				});
			}
		}
	}
</script>

<style lang="less">
	.cropper-container {
		position: relative;
	}

	.my-avatar {
		width: 100%;
		display: block;
	}

	/* 相机预览样式 */
	.camera-preview {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 98;
	}
	
	/* 拍照框架样式 */
	.camera-frame {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99;
		pointer-events: none; /* 允许点击穿透到相机 */
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	/* 框架四角标记 */
	.frame-corner {
		width: 30px;
		height: 30px;
		border: 2px solid #ffffff;
		position: absolute;
	}
	
	.top-left {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translate(-275rpx, -385rpx);
		border-right: none;
		border-bottom: none;
	}
	
	.top-right {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translate(275rpx, -385rpx);
		border-left: none;
		border-bottom: none;
	}
	
	.bottom-left {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translate(-275rpx, 385rpx);
		border-right: none;
		border-top: none;
	}
	
	.bottom-right {
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translate(275rpx, 385rpx);
		border-left: none;
		border-top: none;
	}
	
	/* 提示文字 */
	.frame-tip {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) translateY(450rpx);
		color: #ffffff;
		font-size: 16px;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.8);
	}
	
	/* 相机控制按钮 */
	.camera-controls {
		position: fixed;
		bottom: 50px;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 100;
	}
	
	.camera-btn {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.cancel-btn, .album-btn {
		color: #ffffff;
		font-size: 16px;
	}
	
	.capture-btn {
		width: 140rpx;
		height: 140rpx;
		border-radius: 50%;
		border: 4px solid #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.shutter {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background-color: #ffffff;
	}

	/* 画布样式 */
	.my-canvas {
		display: flex;
		position: fixed !important;
		background: #000000;
		left: 0;
		z-index: 100;
		width: 100%;
	}

	.oper-canvas {
		display: flex;
		position: fixed !important;
		left: 0;
		z-index: 101;
		width: 100%;
		pointer-events: auto;
	}

	/* 操作按钮样式 */
	.oper-wrapper {
		height: 71px;
		position: fixed !important;
		box-sizing: border-box;
		width: 100%;
		left: 0;
		bottom: 0;
		z-index: 200;
		flex-direction: row;
	}

	.btn-wrapper {
		background-color: #000000;
		color: #ffffff;
		display: flex;
		height: 100%;
		width: 100%;
		justify-content: space-around;
		align-items: center
	}

	.btn-wrapper view {
		width: 160rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 16px;
		color: #ffffff;
		z-index: 300;
	}

	.hover {
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 8px;
	}
</style>
